@charset "UTF-8";
@import "./_kit/variables.scss";
@import "./_kit/_mixin.scss";


.introduce-detail-wrap{
    background: url("../../assets/images/background.png") repeat;
    padding-bottom:$rem*30;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
        overflow: auto;
    .introduce-detail-content{
        margin:0 $rem*20 0;
        background-color: rgba(253,255,254,.9);
        border-radius: $rem*10;
        position: relative;
        .title-wrap{
            text-align: center;
        }
        .title{
            min-width: $rem*260;
            padding: $rem*0 $rem*20;
            height:$rem*97;
            color: #fff;
            display: inline-block;
            //background-color:#C52B3E;
            background: -webkit-linear-gradient(left,#CB1219 0,#CE0F46 100%);
            border-radius: $rem*10;
            text-align: center;
            line-height: $rem*97;
            margin:-$rem*46 auto $rem*20;
        }
        .introduce-text{
            padding: $rem*20;
            img,
            video{
                max-width: 100%;
            }
            // p{
            //     font-size: $rem*24;
            //     color:#333;
            //     text-indent: 2em;
            //     line-height: $rem*46;
            // }
        }
    }
    .swiper-container{
        width: 100%;
        height: $rem*350;
        background-size: cover;
            white-space: nowrap;
        .swiper-slide{
            width:100%;
            height: $rem*350;
            display: inline-block;
        }
        img{
            width:100%;
            height: $rem*350;
            background-size: cover;
        }
    }
    .introduce-guide{
        width: $rem*404;
        height: $rem*74;
        background-color: rgba(253,255,254,.9);
        border-radius: $rem*50;
        margin: 0 auto;
        position: relative;
        margin-top: -$rem*37;
        z-index: 1;
        h3{
            display: inline-block;
            padding: 0 $rem*34;
            line-height: $rem*74;
            position: relative;
        }
        .background{
            position: absolute;
            width: $rem*200;
            height: $rem*66;
            background: -webkit-linear-gradient(left,#CB1219 0,#CE0F46 100%);
            border-radius: $rem*50;
            margin-top: $rem*4;
            margin-left: $rem*4;
            transition:margin-left .4s;
            -moz-transition:margin-left .4s; /* Firefox 4 */
            -webkit-transition:margin-left .4s; /* Safari and Chrome */
            -o-transition:margin-left .4s; /* Opera */
        }
    }
    .stories-list{
        padding: 0 $rem*20 0;
        &>li{
            background-color: rgba(253,255,254,.9);
            padding: $rem*30;
            font-size: $rem*26;
            color: #666;
            border-radius: $rem*10;
            margin-top: $rem*49;
            .video-title{
                font-size: $rem*32;
            }
            .video-content{
                position: relative;
                img{
                    width:100%;
                    height:$rem*251 ;
                    margin-top: $rem*10;
                }
                i{
                    background:url("../../assets/images/play.png") no-repeat;
                    background-size:contain;
                    width: $rem*120;
                    height: $rem*120;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    position: absolute;
                }
            }
        }
    }
    .teacher-list{
        @include clearfix;
        margin: $rem*50 $rem*20 0;
        border-radius: $rem*10;
        background-color: rgba(253, 255, 254, .85);
        padding:$rem*10 $rem*30;
        img{
            width: $rem*100;
            height: $rem*100;
            float:left;
            margin-right: $rem*20;
        }
        &>li {
            padding: $rem*20 0 ;
            border-bottom: $rem*1 solid #666;
            overflow: hidden;
            &:last-child{
                border-bottom: none;
            }
            .teacher-info{
               h3{
                    font-size: $rem*32;
                    color: #000;
                    padding-bottom: $rem*10;
                    line-height: $rem*48;
               }
                p{
                    font-size: $rem*26;
                    color: #999;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}

.introduce-detail{
    padding-top: $rem*78;
}

